<template>
  <div class="user_bind_elder">
    <aplid-base-crud ref="crud" v-bind="baseConfig">
      <template #isOpen="{ row }">
        <div class="status_wrap">
          <div class="dot" :class="row.isOpen == 1 ? 'success' : 'error'"></div>
          <div class="status" :class="row.isOpen == 1 ? 'success' : 'error'">{{ row.isOpen == 1 ? '启用' : '停用' }}</div>
        </div>
      </template>
      <template #menuColumn="{ row }">
        <el-popconfirm :title="row.isOpen == 0 ? '确认启用该题库吗？' : '确认停用该题库吗？'" @confirm="handleConfirm(row)">
          <template #reference>
            <el-button link :type="row.isOpen == 0 ? 'primary' : 'danger'">
              {{ row.isOpen == 0 ? '启用' : '停用' }}
            </el-button>
          </template>
        </el-popconfirm>
      </template>
      <template #questionDialog="{row}">
        <div>
          <Question :id="row.id"></Question>
        </div>
      </template>
    </aplid-base-crud>
  </div>
</template>

<script setup lang="ts">
import Question from './question/index.vue'
import { baseConfig } from './config.js'
import api from '@/apiMod'
const crud = ref(null)
const handleConfirm = async (row) => {
  row.isOpen = row.isOpen == 0 ? '1' : '0'
      const res = await api.view_bscQuestionBank_edit(row)
      if (res.code == 0) {
        ElMessage.success('操作成功')
        crud.value.refreshChange()
      }
}
</script>

<style scoped lang="scss">
.status_wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  .dot {
    height: 6px;
    width: 6px;
    border-radius: 50%;

    &.success {
      background: #4bd863;
    }

    &.error {
      background: #d9001b;
    }
  }

  .status {
    margin-left: 10px;

    &.success {
      color: #4bd863;
    }

    &.error {
      color: #d9001b;
    }
  }
}
</style>